<template>
    <div style="padding-top:300px;">
        <div>用户名：<el-input v-model="username" style="width:300px;" ></el-input></div>
        <div>密码：<el-input type="password" v-model="password" style="width:300px;"></el-input></div>
        
        <div><el-checkbox v-model="isChecked">记住密码</el-checkbox></div>
        <div><el-button @click="eventLogin">立即登录</el-button></div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            username:'',
            password:'',
            isChecked:false
        }
    },
    //页面加载的时候
    mounted(){
        //在加载的时候，需要去判断，之前有没有记住密码，如果有记住，那么就反填密码
        var p= localStorage.getItem('2101A_login_password')
        if(p != null){
            this.password = p
        }
        var u= localStorage.getItem('2101A_login_username')
        if(u != null){
            this.username = u
        }
    },
    methods:{
        //模拟登录，记住密码
        eventLogin(){
            if(this.username!='' && this.password != ''){
                this.$message.info('登录成功')

                //判断是否选中记住密码。如果勾选了，则将密码保存在缓存中
                if(this.isChecked){
                    //localStorage['2101A_login_password'] = this.password
                    localStorage.setItem('2101A_login_password',this.password)
                    localStorage.setItem('2101A_login_username',this.username)
                }

            }else{
                this.$message.error('登录失败')
            }
        }
    }
}
</script>